
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IframePanels for ExtJs 2.0</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 <!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>

     <script type="text/javascript" src="../portal/Portal.js"></script>
     <script type="text/javascript" src="../portal/PortalColumn.js"></script>
     <script type="text/javascript" src="../portal/Portlet.js"></script>
    <script type="text/javascript" src="miframe.js"></script>
    <link rel="stylesheet" type="text/css" href="../portal/portal.css" />


    <script type="text/javascript">


    Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

    Ext.onReady(function(){
        Ext.QuickTips.init();
        Ext.QuickTips.getQuickTip().interceptTitles = true;
        Ext.QuickTips.enable();

        // create some portlet tools using built in Ext tool ids
       var tools = [{
               id:'gear',
               handler: function(e, target, panel){
                   panel.setSrc();
               }
           },{
               id:'close',
               handler: function(e, target, panel){
                   panel.ownerCt.remove(panel, true);
               }
        }];
       var viewport = new Ext.Viewport({
              layout:'border',
              layoutConfig  :{
                  animate:  Ext.isIE
               },
              items:[{
                  region:'west',
                  id:'west-panel',
                  title:'West',
                  split:true,
                  width: 200,
                  minSize: 175,
                  maxSize: 400,
                  collapsible: true,

                  floatable : true,

                  animCollapse  :Ext.isIE,  //prevent frame re-initialization due to animation effects
                  animFloat : Ext.isIE,

                  margins       :'35 0 5 5',
                  cmargins      :'35 5 5 5',
                  layout        :'accordion',
                  defaultType   :'iframepanel',
                  layoutConfig  :{
                      animate:  Ext.isIE
                  },
                  defaults      :{
                        loadMask:false,
                        border:false
                   },
                  items : [{
                      html: Ext.example.shortBogusMarkup,
                      title:'Navigation'
                     },{
                      title:'Settings',
                      html: Ext.example.shortBogusMarkup
                      }]
              },
              {
                  xtype     :'portal',
                  hideMode  :!Ext.isIE?'nosize':'display',
                  region    :'center',
                  margins   :'35 5 5 0',
                  defaults:{
                        hideMode:!Ext.isIE?'nosize':'display'
                  },
                  title:'ManagedIframe Portlets',
                  items:[{
                      columnWidth:.5,
                      style:{padding:'10px 0 10px 10px'},
                      defaultType:'iframeportlet',

                      defaults:{
                          height:300
                         ,loadMask:false
                         ,tools: tools
                        },
                      items:[{
                           title:'Ext Forums'
                          ,defaultSrc :  'http://extjs.com/forum/index.php'


                      },{
                          title: 'Google',
                          defaultSrc :  'http://www.google.com'

                      }]
                  },{
                      columnWidth   :.5,
                      style         :{padding:'10px'},
                      defaultType   :'iframeportlet',
                      defaults      :{
                             height:400
                            ,loadMask:{msg:'Loading Printable Bogus Markup...'}
                            ,border:true
                            ,tools: tools
                        },
                      items:    [{
                          title: 'Iframe Portlet',
                          html: 'Notice the way all browsers (except IE) reset the iframe when its DOM parent changes [boo].'
                      },{
                          title: 'Iframe Portlet 2',
                          html: Ext.example.shortBogusMarkup
                      }]
                  }]
              }]
        });
       var toggle = false;
       var comeHome = function(){ Ext.getCmp('sites').activeTab.setSrc();},
           printPanel = function(){
               try{
                  Ext.getCmp('sites').activeTab.iframe.print();
              }catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
           },
           _urlDelim = '\/',
           getLocationAbsolute = function(){
               var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
               var u=location.href.split(d);
               u.pop(); //this page
               return u.join(d);
           },
           getSiteRoot = function(){
            var url = getLocationAbsolute().split(_urlDelim );
            url.pop();
                    return url.join(_urlDelim);
           };
       var buildTBar = function(){
           return [{ text:'Return',handler: comeHome},
                    '-',
                    {text: 'Print',handler: printPanel},
                    '-',
                    {
                    split:true,
                    text:'Drop Down Menu',
                    iconCls: 'preview-bottom',
                    handler: null,
                    menu:{
                        //id:'reading-menu',
                        cls:'reading-menu',
                        width:200,
                        listeners:{        //mask all frames while menu is visible.
                            beforeshow : Ext.ux.ManagedIFrame.Manager.showShims,
                            hide       : Ext.ux.ManagedIFrame.Manager.hideShims,
                            scope      : Ext.ux.ManagedIFrame.Manager

                        },
                        items: [{
                            text:'Bottom',
                            checked:true,
                            group:'rpgroup',
                            scope:this,
                            iconCls:'preview-bottom'
                        },{
                            text:'Right',
                            checked:false,
                            group:'rpgroup',
                            scope:this,
                            iconCls:'preview-right'
                        },{
                            text:'Hidden',
                            checked:false,
                            group:'rpgroup',
                            scope:this,
                            iconCls:'preview-hide'
                        }]
                    }
                }
              ];
       };

       win = new Ext.Window({
            title: 'WebBrowser Fun',
            id:'browserfun',
            layout:'fit',
            minimizable: false,
            maximizable: true,
            width:600,
            height: 500,
            constrainHeader:true,
            collapsible : true,
            animCollapse  :Ext.isIE,
            plain: false,
            items:{
              xtype:'tabpanel',
              id:'sites',
              defaultType: 'iframepanel',
              defaults:{
                closable:true,
                loadMask:{hideOnReady :false,msg:'Loading Site...'},
                autoScroll : true,
                autoShow:true


              },

              items: [{
                     id: 'google'
                    ,title:'Google'
                    ,frameConfig : {id:'google'}
                    ,defaultSrc : function(){return 'http://www.google.com';}
                    ,tbar : buildTBar ()
                       }, {
                     id: 'ajaxian'
                    ,title:'Ajaxian'
                    ,frameConfig : {autoCreate:{id:'ajaxianFrame'}}
                    ,defaultSrc :  'http://www.ajaxian.com'
                    ,tbar : buildTBar ()
                       }, {
                     id: 'extjs'
                    ,title:'Ext Forums'
                    ,frameConfig : {name:'extjs'}
                    ,defaultSrc :  'http://extjs.com/forum/showthread.php?t=32310'
                    ,tbar : buildTBar ()
                       },{
                     id: 'bogus'
                    ,title:'Bogus Markup'
                    ,resetUrl :Ext.isIE&&Ext.isSecure?Ext.SSL_SECURE_URL: ''
                    ,loadMask:{hideOnReady :false,msg:'Loading Printable Bogus Markup...'}

                    ,html: '<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup

                     ,tbar:[{
                        text: 'Print',
                        handler: printPanel
                     },'-',{
                        text: 'Switch', //<-- Added this .reset sample
                        handler: function(){
                          var i;
                          if(i=Ext.getCmp('sites').activeTab){
                              toggle = !toggle;
                              if (toggle){
                                i.setSrc('http://www.google.com', true);
                              }else{
                                i.getFrame().reset(null, function(){
                                    i.getFrame().update('<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup);

                                });

                              }
                            }
                         }
                      }]
                 }
              ]
            }
         });
         win.show();

         Ext.EventManager.on(window, "beforeunload", function(){

           Ext.destroy(viewport, win);

         },window,{single:true});

    });

    </script>

    <!-- Common Styles for the examples -->
    <link rel="stylesheet" type="text/css" href="../examples.css" />
    <link rel="stylesheet" type="text/css" href="../shared/samples.css" />


</head>
<body>
<script type="text/javascript">
Ext.example = function(){
    var msgCt;

    function createBox(t, s){
        return ['<div class="msg">',
                '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s, '</div></div></div>',
                '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                '</div>'].join('');
    }
    return {
        msg : function(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            msgCt.alignTo(document, 't-t');
            var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
            m.slideIn('t').pause(1).ghost("t", {remove:true});
        },

        init : function(){
            var t = Ext.get('exttheme');
            if(!t){ // run locally?
                return;
            }
            var theme = Cookies.get('exttheme') || 'aero';
            if(theme){
                t.dom.value = theme;
                Ext.getBody().addClass('x-'+theme);
            }
            t.on('change', function(){
                Cookies.set('exttheme', t.getValue());
                setTimeout(function(){
                    window.location.reload();
                }, 250);
            });

            var lb = Ext.get('lib-bar');
            if(lb){
                lb.show();
            }
        }
    };
}();

Ext.example.shortBogusMarkup = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.';
Ext.example.bogusMarkup = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.</p>';

Ext.onReady(Ext.example.init, Ext.example);


// old school cookie functions grabbed off the web
var Cookies = {};
Cookies.set = function(name, value){
     var argv = arguments;
     var argc = arguments.length;
     var expires = (argc > 2) ? argv[2] : null;
     var path = (argc > 3) ? argv[3] : '/';
     var domain = (argc > 4) ? argv[4] : null;
     var secure = (argc > 5) ? argv[5] : false;
     document.cookie = name + "=" + escape (value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
};

Cookies.get = function(name){
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    var j = 0;
    while(i < clen){
        j = i + alen;
        if (document.cookie.substring(i, j) == arg)
            return Cookies.getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if(i == 0)
            break;
    }
    return null;
};

Cookies.clear = function(name) {
  if(Cookies.get(name)){
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
};

Cookies.getCookieVal = function(offset){
   var endstr = document.cookie.indexOf(";", offset);
   if(endstr == -1){
       endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
};
</script>
<h1>Ext.ux.ManagedIframePanel</h1>

</body>
</html>
